<template>
	<view>
		<u-row style="padding:0 30rpx;margin-top:5rpx;">
			<u-col span="4" v-for="(itme,index) in booklist" @click="tabinfo">
				<view class="book-grid-item" @longtap="touchstart(index)">
					<view style="position: absolute;top:-18rpx;right: -8rpx;z-index:1;"><u-badge v-if="itme.reading"
							:absolute="false" :is-dot="true" type="error"
							style="margin-left:-8rpx;margin-top:-5rpx;"></u-badge></view>

					<view class="img_box">
						<view class="ranking" :class="{one:index == 0,two:index == 1,three:index == 2}"
							v-if="isRanking">
							<view class="icon"><u-icon name="bookmark"></u-icon></view>
							TOP&nbsp;{{index+1}}
						</view>
						<view class="image">
							<u-lazy-load border-radius="6" :image="itme.image" threshold="300"
								mode="aspectFit"></u-lazy-load>

						</view>

					</view>

					<view class="title u-line-1">
						{{ itme.name }}
					</view>
					<view class="u-light-color u-font-12">
						{{ itme.read ==0 ?'未读' : itme.read+'章' }}/{{ itme.newest }}章
					</view>
				</view>
			</u-col>
			<u-col span="4" @click="gohome">
				<view class="book-grid-item">
					<view class="u-book-wrap u-flex u-row-center">
						<u-icon name="/static/image/san_book.png" size="80" label="点我发现\n更多书籍" label-pos="bottom"
							label-size="23" label-color="#cdcdcd" margin-top="20"></u-icon>
					</view>
					<view style="height: 45px;"></view>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		props: ["book", "ranking"],
		data() {
			return {
				booklist: this.book,
				isRanking: this.ranking || false,
			}
		},
		methods: {
			tabinfo() {
				this.$u.route({
					url: 'pages/book/bookinfo'
				})
			},
			touchstart(index) {
				console.log(index)
				return false;
			},
			gopage(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.book-grid-item {
		display: flex;
		flex-direction: column;
		width: auto;
		position: relative;
		margin: 0 18rpx;
		margin-bottom: 40rpx;

		.img_box {
			position: relative;
			overflow: hidden;
			border-radius: 6px; 
			.ranking {
				position: absolute;
				left: -50rpx;
				top: 0;
				width: 100%;
				text-align: center;
				z-index: 888;
				color: #fff;
				transform: rotate(-45deg);
				background-color: #4284ed;
			}

			.ranking {
				font-size: 20rpx;

				line-height: 30rpx;
				background-color: #969ba3;

				&.one {
					background-color: #e73500;
				}

				&.two {
					background-color: #f0643a;
				}

				&.three {
					background-color: #f0c53a;
				}
			}

		}

		.image {
			width: 100%;
			height: 235rpx;
            //background-color: #e3ebf5;
		}


		.title {
			line-height: 40rpx;
			// padding-top: 15rpx;
		}

		.u-book-wrap {
			//虚线边框
			width: auto;
			height: 250rpx;
			border-width: 1px;
			border-color: #ddd;
			border-style: dashed;
			background-color: rgb(250, 250, 250);
			border-radius: 6px;
		}
	}
</style>